<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>MYMSGRO</title>
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<link rel="stylesheet" type="text/css" href="css/meniu.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />

</h:head>
<h:body>

	<ui:include src="header.xhtml" />
	<h:panelGroup layout="block" id="content">
		<ui:include src="leftMenu.xhtml" />
		<h:panelGroup layout="block" id="contenRight">
			<h:panelGroup layout="block" id="header" style="margin-top: 20px;">
				<ul>
					<li id="selected"><a>Create Survey</a></li>
				</ul>
			</h:panelGroup>
			<h:panelGroup layout="block" id="contentTab">
				<h:form id="form">

					<h:message for="sTitle" styleClass="inputError" />
					<br />
					<h:message for="sDescription" styleClass="inputError" />
					<br />
					<h:message for="popupButtonCal" styleClass="inputError" />
					<br />
					<h:panelGrid columns="3" styleClass="surveyCreate">



						<h:outputText value="Survey title: " />
						<h:inputText id="sTitle" value="#{surveyDTO.title}"
							required="true" styleClass="inputTextStyle"
							requiredMessage="Please introduce the survey title!" />
						<h:outputText value="*" styleClass="inputRed"></h:outputText>


						<h:outputText value="Survey description: " />
						<h:inputText id="sDescription" value="#{surveyDTO.description}"
							required="true" styleClass="inputTextStyle"
							requiredMessage="Please introduce the survey description!" />
						<h:outputText value="*" styleClass="inputRed"></h:outputText>

						<h:outputText value="End date: " />

						<p:calendar effect="explode" value="#{surveyDTO.endDate}"
							readonlyInput="true" timeZone="#{calendarBean.timeZone}"
							pattern="yyyy-MM-dd" mindate="#{calendarBean.dateSurvey}"
							id="popupButtonCal" required="true"
							requiredMessage="Introduce end date!" />
						<h:outputText value="*" styleClass="inputRed"></h:outputText>

						<h:outputText value="Topic: " />
						<h:selectOneMenu value="#{topicDTO.id}"
							styleClass="comboBoxSurveyBorder">
							<f:selectItems value="#{surveyBean.topics}" var="topic"
								itemValue="#{topic.id}"
								itemLabel="#{topic.categoryDTO.name} - #{topic.subcategoryDTO.name}" />
						</h:selectOneMenu>

						<h:commandButton style="width: 26px;"
							image="resources/img/add-icon-button-hi.png" immediate="true"
							action="createTopic.xhtml" />

						<h:outputText value=" "></h:outputText>
						<h:outputText value="*fields mandatory" styleClass="inputError" />
						<h:outputText value=" " />



						<h:outputText value=" "></h:outputText>
						<h:commandButton value="Create" action="#{surveyBean.create}"
							styleClass="buttonSurvey" />
						<h:outputText value=" "></h:outputText>
					</h:panelGrid>
					<h:panelGrid columns="1">
						<h:outputText rendered="#{surveyBean.dateNotValid}"
							styleClass="inputError" value="End date must be after today!" />
					</h:panelGrid>
				</h:form>
			</h:panelGroup>
		</h:panelGroup>
	</h:panelGroup>
</h:body>
</html>